---
id: chip
title: Chip
sidebar_label: Chip
---

Chips are compact elements that represent an input, attribute, or action. They allow users to enter information, make selections, filter content, or trigger actions.

## Usage

To use the `Chip`, import it from your components and pass the necessary props like `children`, `colorScheme`, `size`, `error`, `outlined`, `onClick`, and `icon`.

import CodeSample from "../../src/CodeSample";
import CodeBlock from "@theme/CodeBlock";

## Basic Chip

A simple chip with minimal configuration. It displays a piece of text or a tag.

import ChipBasicDemo from '../../samples/components/chip/chip_basic';
import ChipBasicSource from '!!raw-loader!../../samples/components/chip/chip_basic';

<CodeSample>
    <ChipBasicDemo/>
</CodeSample>

<CodeBlock language="tsx">{ChipBasicSource}</CodeBlock>

## Chip Sizes

Illustrating how to use different sizes for the chip component. You can choose between `tiny`, `small`, and `medium`.

import ChipSizesDemo from '../../samples/components/chip/chip_sizes';
import ChipSizesSource from '!!raw-loader!../../samples/components/chip/chip_sizes';

<CodeSample>
    <ChipSizesDemo/>
</CodeSample>

<CodeBlock language="tsx">{ChipSizesSource}</CodeBlock>

## Chip Colors

Demonstrates usage of the `colorScheme` prop to customize the chip appearance according to your application's theme.

import ChipColorsDemo from '../../samples/components/chip/chip_colors';
import ChipColorsSource from '!!raw-loader!../../samples/components/chip/chip_colors';

<CodeSample>
    <ChipColorsDemo/>
</CodeSample>

<CodeBlock language="tsx">{ChipColorsSource}</CodeBlock>

## Chip with Icon

Showcases how to use a chip with an icon for better user interaction or providing more information within the chip.

import ChipIconDemo from '../../samples/components/chip/chip_icon';
import ChipIconSource from '!!raw-loader!../../samples/components/chip/chip_icon';

<CodeSample>
    <ChipIconDemo/>
</CodeSample>

<CodeBlock language="tsx">{ChipIconSource}</CodeBlock>

## Clickable Chip

This example demonstrates a clickable chip that triggers an action on click. Useful for interactive tags or selections.

import ChipClickableDemo from '../../samples/components/chip/chip_clickable';
import ChipClickableSource from '!!raw-loader!../../samples/components/chip/chip_clickable';

<CodeSample>
    <ChipClickableDemo/>
</CodeSample>

<CodeBlock language="tsx">{ChipClickableSource}</CodeBlock>